<template>
  <div class="upload-file">
    <div class="file-image" v-if="urlValue">
      <a-image height="100%" :src="urlValue" :preview="false" />
      <close-circle-filled class="file-close" @click="urlValue = ''" />
    </div>

    <a-upload
      :showUploadList="false"
      accept="image/*"
      :disabled="loading"
      :customRequest="handleCustomRequest"
      :beforeUpload="handleBeforeUpload"
    >
      <div class="file-upload">
        <a-button type="text" :loading="loading">
          <template #icon><UploadOutlined /></template>
          <span v-if="!urlValue">{{ fileType == '3' ? '上传交易凭证' : '上传图片' }}</span>
          <span v-else>重新上传</span>
        </a-button>
      </div>
    </a-upload>
  </div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { ref, shallowRef, onMounted, computed } from 'vue'
import { message } from 'ant-design-vue'
import { getUploadFile } from '@/utils/axios/request'
import { CloseCircleFilled, UploadOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  fileType: { type: String, default: '1' },
  modelValue: { type: String, default: '' },
  showPreImg: { type: Boolean, default: true }
})

const emit = defineEmits(['update:modelValue'])

const loading = ref(false)
// url
const urlValue = computed({
  get() {
    return props.modelValue
  },
  set(value: string) {
    emit('update:modelValue', value)
  }
})

const handleBeforeUpload = (file: any) => {
  const maxSize = 10 * 1024 * 1024 // 10MB
  const isSizeValid = file.size <= maxSize

  if (!isSizeValid) {
    message.error('文件大小不能超过10MB')
    return false
  }

  const isImage = file.type.startsWith('image/')

  if (!isImage) {
    message.error('请上传图片文件')
    return false
  }

  return true
}

const handleCustomRequest = async (options: any) => {
  // 示例：使用 axios 进行文件上传
  const formData = new FormData()
  formData.append('file', options.file)
  formData.append('fileType', props.fileType)
  try {
    loading.value = true
    let res = await getUploadFile(formData)
    loading.value = false
    if (props.showPreImg) {
      urlValue.value = res.result
    }
  } catch (error) {
    loading.value = false
  }
}
</script>
<style lang="less" scoped>
.upload-file {
  margin-bottom: 8px;
  display: flex;
  .file-image {
    width: 280px;
    height: 174px;
    margin-right: 12px;
    // border: 1px solid #cdcdcd;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .file-close {
      font-size: 16px;
      color: #c0c0c0;
      position: absolute;
      right: -4px;
      top: -5px;
      cursor: pointer;
    }
  }
  :deep(.file-upload) {
    width: 280px;
    height: 174px;
    background: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #cdcdcd;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      border-color: @primary-color;
      .ant-btn-text,
      .span {
        color: @primary-color;
      }
    }
    .ant-btn-text,
    .span {
      color: #535d71;
      background: transparent;
    }
  }
}
</style>
